<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--一. 导入模版引擎js文件 此时全局会挂载template('模版id',需要渲染的数据对象)函数 -->
    <script src="js/template-web.js"></script>
</head>

<body>
    <div id="div"></div>

    <!-- 三.定义html模版 -->
    <script type="text/html" id="tpl-user">
    <!-- 1.art-template标准语法之属性输出 -->
    <h1>{{name}}{{age}}{{sex}}</h1>
    <!-- 2.art-template标准语法之原文输出 -->
    {{@test}}
    <!-- 3.art-template标准语法之条件输出 -->
    <div>
        {{if flag== 0}} flag等于0
        {{else if flag == 1}}flag 等于1
        {{/if}}
    </div>
    <!-- 4.art-template标准语法之循环输出 -->
    <ul>
        {{each happy}}
        <li>
            索引是：{{$index}},当前项是:{{$value}}
        </li>
        {{/each}}
    </ul>

    <!-- 5.template标准语法之过滤器函数 -->

    <!--5.2 相当于调用过滤器函数  |管道符 左边是实参也是要过滤的对象 右边是过滤器函数过滤后retuan返回值-->
    <h3> {{regTime|filteName}}</h3>


    </script>


    <script>
        // 5.1定义过滤器函数
        template.defaults.imports.filteName = function (date) {
            // console.log(date);
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            return y + '-' + m + '-' + d
        }
        // 二.定义数据
        var data = {
            name: 'andy',
            age: '男',
            sex: '女',
            test: '<h3>测试原文输出</h3>', flag: 1, happy: ['吃饭饭', '睡觉觉', '日浦西'],
            regTime: new Date()

        }

        // 四.调用函数
        var htmlstr = template('tpl-user', data)

        // 五.渲染HTML结构
        var div = document.querySelector('#div')
        div.innerHTML = htmlstr
    </script>
    <!-- 注意： 模版引擎按照这五步操作 -->
</body>

</html>